ターミナルを共有してブラウザ上で閲覧する - Piping Server経由

オリジナルの作者さんと見つけた場所

ブラウザ上でターミナルの画面を共有する方法。Piping Server経由する。

発見元は第40回シェル芸勉強会大阪サテライトレポート - so’s blog'の記事。シェル芸を中心とした勉強会の様子。動画もYouTubeに上がっていて色々面白いものがたくさんある。おそらく有名なワタナベ難読化シェル芸とかもここで生まれた様子。

シェル芸勉強会の動画もあり、この動画内でブラウザ上でターミナルを共有するコードを発見した。

アプリケーション

以下をブラウザで開いてターミナル共有できる

https://gyazo.com/39897cea9c844cb4ba13ae5eb19cc99a

オリジナルコードは小原　一哉さんが作者さん。それをコードを少し改良したものになっている。

改良後のコードは、GItHub Gistので見ることができる。

使い方動画

デモ動画のため同じマシン上で行っているが、別のマシンでもターミナル共有が可能。

https://youtu.be/lNn5Vt3iWCA

以下は、複数人で閲覧する動画。

https://youtu.be/lSfHgJBI5N4

以下のコマンドでターミナルの内容を送信開始できる。

Linux: script -f >(curl -kNT - https://ppng.io/パス名 )

Mac: script -F >(curl -kNT - https://ppng.io/パス名 )

上記のWebアプリ上にコピペしやすく出てるので覚えなくても大丈夫。

このWebアプリの良さ

ターミナル画面を見たい人は、ブラウザさえ準備できれば良くてすごく手軽。

送信者も広くインストールされているscriptコマンドやcurlコマンドさえあればよくてこれも手軽。

Piping Server経由のため、自分で立てたやつを利用したりlocalhostに立てたやつを利用したり、エンドツーエンド暗号化をこのWebアプリになどに組み込めばよりセキュアに安心して共有することができると思う。

使われているライブラリ

JavaScript/TypeScript向けのライブラリXterm.jsが使われている。

GitHubリポジトリ:

https://gh-card.dev/repos/xtermjs/xterm.js.svg https://github.com/xtermjs/xterm.js

公式ページ: Xterm.js

以下は、公式にあったものをのhrefとsrcをUNPKGに変更して引用。

code:html

<html>

<head>

</head>

<body>

var term = new Terminal();

term.open(document.getElementById('terminal'));

term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')

</script>

</body>

</html>

すごくシンプルに制御文字なども含めて描画できることがわかる。

繰り返しになるが、オリジナルコードは小原　一哉さんが作者さん。それをコードを少し改良したものになっている。